import React from "react"

import { connect } from "react-redux";
import * as cityActions from "../../../redux/actions/city"
import { bindActionCreators } from "redux"
import { withRouter } from "react-router-dom"

import * as util from "../../util"

import "./style.less"

class CityList extends React.Component{
	clickHandle(cityName,event){
		let cname = cityName.item;
		// console.log("You clicked city is "+cname);
		// 跟换城市
		if(util.storage.get('city')!==cname){
			this.props.setCityinfo.city({
				cityName: cname
			});
			util.storage.set("city",cname);

		}
		window.history.back();
	}
	render(){
		const citylist = this.props.data;
	    return(
			<div className="city-list-container">
				<h3>热门城市</h3>
				<ul>
					{
						citylist.map((item,index)=>{
							return (
								<li key={ index }>
									<span onClick={this.clickHandle.bind(this, { item })}>{ item }</span>
								</li>
							)
						})
					}
				</ul>
			</div>
	    )
	}
}

// 读
function mapStateToprops(state){
	return {
		getCityinfo:state.cityinfo
	}
}

// 写
function mapDispatchToprops(dispatch){
	return {
		setCityinfo: bindActionCreators(cityActions,dispatch)
	}
}

export default withRouter(connect(
	mapStateToprops,
	mapDispatchToprops
)(CityList))